
<template>
    <div class="index">
        <div class="form">
            <Row :gutter="10">
                <Col span="4">
                    <Input v-model="value_secretkey" size="large" placeholder="secretkey">
                        <span slot="prepend">secretkey</span>
                    </Input>
                </Col>
                <Col span="4">
                    <Input v-model="value_session" size="large" placeholder="session_id">
                        <span slot="prepend">session_id</span>
                    </Input>
                </Col>
                <Col span="4">
                    <Input v-model="value_ip" size="large" placeholder="ip">
                        <span slot="prepend">ip</span>
                    </Input>
                </Col>
                <Col span="4">
                    <Input v-model="value_url_m" size="large" placeholder="url_m">
                        <span slot="prepend">url_m</span>
                    </Input>
                </Col>
                <Col span="4">
                    <Input v-model="value_error" size="large" placeholder="error">
                        <span slot="prepend">error</span>
                    </Input>
                </Col>
                <Col span="3">
                    <Input v-model="value_r" size="large" placeholder="rows">
                        <span slot="prepend">rows</span>
                    </Input>
                </Col>
                <Col span="1">
                    <Button type="primary" @click="search">搜索</Button>
                </Col>
            </Row>
        </div>
        <!-- <Table border :columns="logList" :data="data" @on-row-click="getid"></Table> -->
        <table border="1" cellspacing="0">
            <thead>
                <tr>
                    <td>sessionid;ip;id;run_uniqid</td>
                    <td>url;url_m</td>
                    <td>get</td>
                    <td style="text-align: center;">error</td>
                    <td style="text-align: center;">Action</td>
                </tr>
            </thead>
            <tbody>
                <logListItem v-for="item in data" :content="item"></logListItem>
            </tbody>
        </table>
        <div class="page">
            <Page :total="total" :page-size="pageSize" @on-change="pageChange"></Page>
        </div>
    </div>
</template>
<script>
import logListItem from '@/components/log_list_item'
export default {
    data () {
        return {
            total:0,
            pageSize:20,
            p:1,
            value_secretkey:'',
            value_session:'',
            value_ip:'',
            value_url_m:'',
            value_error:'',
            value_r:20,
            data: []
        }
    },
    created(){
        this.get_list();
    },
    components: {
        logListItem
    },
    methods: {
        get_list(){
            this.$ajax(
                'get_log_list',
                {
                    secretkey:this.value_secretkey,
                    session_id:this.value_session,
                    ip:this.value_ip,
                    error:this.value_error,
                    url_m:this.value_url_m,
                    r:this.value_r,
                    p: this.p
                },
                (res)=>{
                    this.data = res.data.data.items;
                    this.total = res.data.data.total_items;
                    this.pageSize = res.data.data.limit;
                },(error)=>{}
            )
        },
        pageChange(p){
            this.p = p;
            this.get_list();
        },
        //跳转搜索结果页
        search(){
            this.$router.push({
                path:'/log_list_search/',
                query: {
                    secretkey:this.value_secretkey,
                    session:this.value_session,
                    ip:this.value_ip,
                    url_m:this.value_url_m,
                    error:this.value_error,
                    r:this.value_r,
                    p:1
                }
            });
        }
    }
};
</script>
<style scoped>
.index{
    padding: 30px;
}
.page{
    margin-top: 20px;
}
.form{
    margin-bottom: 15px;
}
table{
    width: 100%;
    border-collapse: collapse;
    border: 1px solid #ddd;
}
table td{
    font-size: 14px;
    padding: 5px;
}
table thead{
    background: #eee;
}
</style>
